import { useDispatch, useSelector } from "react-redux";

export default function TodoFooter() {
  let dispatch = useDispatch();
  let incomplete = 0;// 未完成
  let complete = 0; // 已完成
  const todoList = useSelector(state => state.todoList);
  if (todoList.length) {
    for (let i = 0; i < todoList.length; i++) {
      const item = todoList[i];
      if (item.state) {
        complete++
      } else {
        incomplete++
      }
    }
  }
  return (
    <div id="todo-stats">
      <span className="todo-count">
        <span className="word">一共</span>
      <span className="number">{todoList.length}</span>
      <span className="word">，</span>
    </span>
      <span className="todo-count">
        <span className="number">{incomplete}</span>
        <span className="word">项待完成</span>
      </span>
      <span className="todo-clear" onClick={() => {
        dispatch({
          type:'TODOLIST_REMOVECOMPLETE',
        })
      } }>
        Clear <span>{complete}</span> 已完成事项
      </span>
    </div>
  )
 }